<template>
    <view>
        <!-- pages/device/index.wxml -->
        <view>
            <Nav nav-type="title" titleText="点位列表" />
            <t-tabs :value="tabVal" @change="onTabsChange" :swipeable="false" t-class="custom-tabs">
                <t-tab-panel label="列表" value="0">
                    <!-- 搜索 S -->
                    <view class="search-box">
                        <!-- 关键词 -->
                        <t-search t-class="keyword" v-model="keyword" placeholder="请输入点位名称" @submit="onSearch" @clear="onSearch" />
                        <t-dropdown-menu>
                            <!-- 类型 -->
                            <t-dropdown-item :options="statusOpt" :value="deviceType" @change="onTypeChange" />
                            <!-- 网格 -->
                            <!-- <t-dropdown-item options="{{gridOpt}}" value="{{gridId}}" bindchange="onGridChange" /> -->
                        </t-dropdown-menu>
                    </view>
                    <!-- 搜索 E -->
                    <!-- 列表 S -->
                    <scroll-view
                        slot="panel"
                        class="message-list"
                        scroll-y
                        refresher-enabled
                        :refresher-triggered="loading"
                        @refresherrefresh="onSearch"
                        @scrolltolower="nextPage"
                        :scroll-into-view="scrollId"
                    >
                        <view class="list-item" :id="'list' + item.id" :data-index="index" @tap="positionItemClick" v-for="(item, index) in list" :key="index">
                            <view class="item">
                                <view class="left">
                                    <view class="name">
                                        <view class="red-bot" :style="'backgroundColor: ' + (item.enableFlag ? '' : '#dd0202')"></view>
                                        {{ item.name }}
                                    </view>
                                    <view class="address">{{ item.region || '--' }}/{{ item.street || '--' }}</view>
                                </view>
                                <view class="right-icon">
                                    <t-button theme="primary" size="small" shape="round" :data-item="item" @tap.native="showDeviceLocation($event, { item })">点位位置</t-button>
                                    <t-icon v-if="!item.showSub" name="caret-right-small" size="48rpx" :data-name="item" />
                                    <t-icon v-if="item.showSub" name="caret-down-small" size="48rpx" :data-name="item" />
                                </view>
                            </view>

                            <view v-if="item.showSub" class="sub-item" @tap.stop.prevent="subClick">
                                <t-cell
                                    class="item-cell"
                                    :title="item.name"
                                    :description="item.deviceSerial"
                                    hover
                                    arrow
                                    :data-item="item"
                                    @click="itemClick($event, { item })"
                                    v-for="(item, index1) in item.deviceInfos"
                                    :key="index1"
                                >
                                    <view class="avatar" slot="left-icon">
                                        <!-- <open-data type="userAvatarUrl" /> -->
                                        <t-avatar :image="item.icon" />
                                    </view>
                                </t-cell>
                                <t-empty v-if="!item.deviceInfos.length" description="暂无设备" />
                            </view>
                        </view>
                        <t-empty v-if="!list.length" class="empty" icon="info-circle-filled" description="暂无数据" />
                    </scroll-view>
                    <!-- 列表 E -->
                </t-tab-panel>
                <t-tab-panel label="地图" value="1">
                    <view class="map-container">
                        <map
                            id="deviceMap"
                            :longitude="longitude"
                            :latitude="latitude"
                            :scale="scale"
                            :markers="markers"
                            @markertap="markerClick"
                            @callouttap="markerClick"
                            @regionchange="regionchange"
                            max-scale="16"
                            :include-points="markers"
                        >
                            <cover-view slot="callout">
                                <block v-for="(item, index) in markers" :key="index">
                                    <cover-view class="customCallout" :marker-id="item.id">
                                        <cover-view class="content">{{ item.data.street }}：{{ item.data.total }}</cover-view>
                                    </cover-view>
                                </block>
                            </cover-view>
                        </map>
                    </view>
                </t-tab-panel>
            </t-tabs>
        </view>
        <!-- 地图点位marker点击弹框 -->
        <t-popup :visible="showDeviceList" @visible-change="onDeviceListPopupVisibleChange" placement="bottom">
            <view class="device-popup">
                <t-cell
                    class="item-cell"
                    :title="item.name"
                    :description="item.deviceSerial"
                    hover
                    arrow
                    :data-item="item"
                    @click="itemClick($event, { item })"
                    v-for="(item, index) in curPointData.deviceInfos"
                    :key="index"
                >
                    <view class="avatar" slot="left-icon">
                        <!-- <open-data type="userAvatarUrl" /> -->
                        <t-avatar :image="item.icon" />
                    </view>
                </t-cell>
                <t-empty v-if="!curPointData.deviceInfos.length" description="此点位暂无设备" />
            </view>
        </t-popup>
        <!-- UPS弹框 -->
        <t-popup :visible="showUPS" @visible-change="onVisibleChange" placement="bottom">
            <view class="tost_content">
                <t-dropdown-menu>
                    <t-dropdown-item v-if="upsCmdOpt.length" :options="upsCmdOpt" v-model="upsCmdValue" @change="onUpsCmdChange" />
                </t-dropdown-menu>
                <view class="tost_title">
                    <view class="tost_title1">
                        <view class="cercle" :style="'background-color:' + deviceStatusColorMap[curMarkerData.deviceStatus] + ';'" />
                        <text>UPS</text>
                    </view>
                    <view class="date_" :style="'color:' + deviceStatusColorMap[curMarkerData.deviceStatus] + ';'">
                        {{ utils.getUpsStatus(curMarkerData.deviceStatus) || '--' }}
                    </view>
                </view>
                <!-- 中间表格 -->
                <scroll-view class="table-cont-list" scroll-y>
                    <view class="table_cont">
                        <view v-for="(item, index) in tableList" :key="index">
                            <view>{{ item.label }}</view>

                            <view>{{ item.value }}</view>

                            <view>{{ item.unit }}</view>
                        </view>
                    </view>
                </scroll-view>
                <view class="tost_btn">
                    <t-button theme="primary" size="small" @tap.native="closeModal">关 闭</t-button>
                </view>
            </view>
        </t-popup>
        <!-- 监控弹框 -->
        <t-popup :visible="showJK" @visible-change="onVisibleChange" placement="center">
            <view class="tost_content">
                <view class="tost_title">
                    <view class="tost_title1">
                        <view class="cercle" style="background-color: #ffd310" />
                        <text>监控</text>
                    </view>
                    <view class="date_">{{ curMarkerData.createTime || '--' }}</view>
                </view>
                <!-- 中间内容 -->
                <view class="img_cont">
                    <t-image v-if="!!curMarkerData.snapshot" :src="imageBaseUrl + curMarkerData.snapshot" mode="aspectFill" width="100%" height="100%" />
                    <!-- <myImage wx:if="{{!!curMarkerData.snapshot}}" src="{{curMarkerData.snapshot}}" /> -->
                    <view v-else class="no_data">信号丢失</view>
                </view>
                <view class="statusinfo">
                    <view>上报状态:{{ deviceStatusMap[curMarkerData.deviceStatus] || '--' }}</view>
                    <view>红绿灯状态:{{ utils.getTrafficLight(curMarkerData.deviceStatus) || '--' }}</view>
                </view>
                <view class="tost_btn">
                    <t-button theme="primary" size="small" @tap.native="closeModal">关 闭</t-button>
                </view>
            </view>
        </t-popup>
        <!-- 图片预览 S -->
        <t-image-viewer :visible="imgVisible" :images="[imageBaseUrl + curMarkerData.snapshot]" @close="closeImgView"></t-image-viewer>
        <!-- 图片预览 E -->
    </view>
</template>
<script module="utils" lang="wxs">
  /** 获取ups状态 */
  function getUpsStatus(status){
      if(status === 1) {
          return '正常'
      } else if(status === 2) {
          return '离线'
      }
      return '异常'
  }

/** 获取交通灯状态 */
function getTrafficLight(status){
  if(status === 1) {
    return '正常'
  } else if(status === 2) {
    return '未知'
  }
  return '异常'
}

  module.exports = {
      getTrafficLight: getTrafficLight,
      getUpsStatus: getUpsStatus
  }
</script>
<script>
import Nav from '@/components/nav';
// pages/device/index.js
import { data as streetLngLatdata } from '../../streetLngLatdata.js';
import { getStreetLevelData, getPositionByStreet, getPositionList, getDeviceDetail, getUPSPageConfig } from '../../api/device.js';
const app = getApp();
const { iconMap, limit, deviceStatusColorMap, cmdNameMap, imageBaseUrl } = app.globalData;
export default {
    components: {
        Nav,
    },
    data() {
        return {
            imageBaseUrl,
            tabVal: 0,

            statusOpt: [
                {
                    value: false,
                    label: '未启动'
                },
                {
                    value: true,
                    label: '已启动'
                }
            ],

            gridOpt: [
                {
                    value: 'all',
                    label: '全部网格'
                }
            ],

            upsCmdOpt: [],
            upsCmdValue: '',
            loading: false,
            scrollId: '',

            // street point
            curModel: 'street',

            pointLoading: false,
            streetLoading: false,
            showLocation: false,

            // 弹窗数据
            showUPS: false,

            showJK: false,
            showDeviceList: false,

            tableList: [
                /* {
                  label: '输入电压',
                  value: 0,
                  unit: 'V',
                },
                {
                  label: '最近一次异常输出电压',
                  value: 0,
                  unit: 'V',
                },
                {
                  label: '输出电压',
                  value: 0,
                  unit: 'V',
                },
                {
                  label: '输出负载百分比',
                  value: 0,
                  unit: '%',
                },
                {
                  label: '输入频率',
                  value: 0,
                  unit: 'Hz',
                },
                {
                  label: '机器内部电池单体电压',
                  value: 0,
                  unit: 'V',
                },
                {
                  label: '机器内部温度',
                  value: 0,
                  unit: '℃',
                }, */
            ],

            // 存储当前点击的设备数据
            curMarkerData: {
                createTime: '',
                snapshot: ''
            },

            // 存储当前点击的点位数据
            curPointData: {
                deviceInfos: []
            },

            deviceStatusMap: {
                1: '正常',
                2: '离线',
                3: '异常',
                4: 'UPS故障',
                5: 'UPS电量低',
                6: 'UPS市电异常'
            },

            imgVisible: false,
            showImgUrl: '',
            upsWarnTime: '',
            deviceStatusColorMap,

            // 地图相关
            markers: [],

            // 默认地图中心点
            longitude: 104.05,

            latitude: 30.65,
            scale: 12,

            // 搜索数据
            size: 10,

            current: 1,
            total: 0,
            keyword: '',
            deviceType: true,
            gridId: 'all',

            // 设备列表
            list: [],

            infoLoading: false,
            pageNum: 0,
            title: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.getUpsCmdOpt();
        this.onSearch();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getStreetLevelDataFn() {
            if (this.showLocation) {
                return;
            }
            this.setData({
                streetLoading: true
            });
            uni.showLoading({
                title: '加载中',
                mask: true
            });
            getStreetLevelData()
                .then((res) => {
                    // console.log('街道级别数据：', res);

                    const { data } = res;
                    if (!data) {
                        return;
                    }
                    const list = data.map((item, index) => ({
                        id: index,
                        longitude: Number(streetLngLatdata[item.street]?.lng),
                        latitude: Number(streetLngLatdata[item.street]?.lat),
                        iconPath: iconMap.icon,
                        width: 30,
                        height: 30,
                        customCallout: {
                            anchorY: 0,
                            anchorX: 0,
                            display: 'ALWAYS'
                        },
                        data: item
                    }));
                    // eslint-disable-next-line no-case-declarations
                    const markers = list.filter((item) => item.longitude && item.latitude);
                    // console.log('街道级别数据：', markers);

                    this.setData({
                        markers,
                        tabVal: '1',
                        curModel: 'street'
                    });
                })
                .finally(() => {
                    setTimeout(() => {
                        this.setData({
                            streetLoading: false
                        });
                        uni.hideLoading();
                    }, 1000);
                });
        },

        /** 获取UPS指令 */
        getUpsCmdOpt() {
            getUPSPageConfig().then((res) => {
                // console.log('配置数据：', res);
                const { records } = res.data;
                const upsCmdOpt = records.map((item) => ({
                    value: item.id,
                    label: `UPS指令：${item.cmd}`
                }));
                this.setData({
                    upsCmdOpt,
                    upsCmdValue: upsCmdOpt[0].value
                });
            });
        },

        /** 获取网格选项 */
        /* getGridOpt() {
      const defaultGridOpt = [
        {
          value: 'all',
          label: '全部网格',
        },
      ];
        getGridList()
        .then((res) => {
          // console.log('网格数据：', res);
          const { data } = res;
          const gridOpt = data.map((item) => ({
            value: item.id,
            label: item.name,
          }));
          this.setData({
            gridOpt: [...defaultGridOpt, ...gridOpt],
          });
        })
        .catch((err) => {
          console.log('获取网格数据失败：', err);
          this.setData({
            gridOpt: defaultGridOpt,
          });
        });
    }, */

        onTypeChange(e) {
            this.setData({
                deviceType: e.detail.value,
                current: 1,
                list: []
            });
            this.getListFn();
        },

        onUpsCmdChange(e) {
            const { upsCmdValue } = this;
            if (upsCmdValue === e.detail.value) {
                return;
            }
            this.setData({
                upsCmdValue: e.detail.value
            });
            this.showInfo(this.curMarkerData);
        },

        /** tab切换 */
        onTabsChange(event) {
            // console.log(`Change tab, tab-panel value is ${event.detail.value}.`);
            switch (event.detail.value) {
                case '0':
                    this.setData({
                        markers: [],
                        tabVal: '0',
                        latitude: 30.65,
                        longitude: 104.05,
                        scale: 12,
                        showLocation: false
                    });
                    break;
                case '1':
                    this.getStreetLevelDataFn();
                    break;
                default:
                    break;
            }
        },

        getListFn(add = false) {
            if (add !== true) {
                this.setData({
                    pageNum: 1
                });
            }
            uni.showLoading({
                title: '加载中',
                mask: true
            });
            this.setData({
                loading: true
            });
            const { size, current, keyword, deviceType, list } = this;
            // let { list } = this.data;

            getPositionList({
                pageSize: size,
                pageNum: current,
                name: keyword,
                enableFlag: deviceType
                // deviceType: deviceType === 0 ? '' : deviceType,
                // gridId: gridId === 'all' ? '' : gridId,
            })
                .then((res) => {
                    // console.log('设备列表：', res.data);
                    const { records, total } = res.data;
                    records.forEach((item) => {
                        // item.icon = item.deviceType === 1 ? iconMap.deviceUps : iconMap.deviceJk;
                        item.showSub = false;
                        item.deviceInfos.forEach((v) => {
                            v.icon = v.deviceType === 1 ? iconMap.deviceUps : iconMap.deviceJk;
                        });
                    });

                    // 列表数据不能超出限制
                    // if (total > limit && current * size >= limit) {
                    //   // 剔除部分列表头部数据
                    //   list = list.slice(size);
                    // }

                    this.setData({
                        list: [...(add === true ? list : []), ...records],
                        total
                    });
                })
                .catch((err) => {
                    console.log('列表错误：', err);
                })
                .finally(() => {
                    uni.hideLoading();
                    this.setData({
                        loading: false
                    });
                });
        },

        /** 搜索 或 刷新数据 */
        onSearch() {
            this.setData({
                current: 1,
                list: []
            });
            this.getListFn();
        },

        nextPage() {
            const { current, total, size } = this;
            if (current * size >= total) {
                return;
            }
            this.setData({
                current: current + 1
            });
            this.getListFn(true);
        },

        markerClick(e) {
            const { markerId } = e.detail;
            // console.log('marker点击事件：', markerId, e);

            // 从markers中找到对应的数据
            const curMarker = this.markers.find((v) => v.id === markerId);
            if (!curMarker) {
                return;
            }

            // console.log('curMarker', curMarker);

            const { data } = curMarker;
            // console.log(data);

            if (data.total) {
                this.streetClickHandle(data);
            } else {
                this.pointClickHandle(data);
            }
        },

        /**
         * 处理点位点击事件
         * @param {*} curMarker
         * @returns
         */
        pointClickHandle(data) {
            if (data.deviceInfos) {
                this.showMarkerDeviceList(data);
            }
        },

        showMarkerDeviceList(data) {
            if (!Array.isArray(data.deviceInfos)) {
                return;
            }
            data.deviceInfos.forEach((v) => {
                v.icon = v.deviceType === 1 ? iconMap.deviceUps : iconMap.deviceJk;
            });
            this.setData({
                curPointData: data,
                showDeviceList: true
            });
        },

        streetClickHandle(data) {
            const { street } = data;
            if (!street) {
                return;
            }
            const streetCenter = streetLngLatdata[street];
            this.setData({
                pointLoading: true
            });
            uni.showLoading({
                title: '加载中',
                mask: true
            });
            getPositionByStreet({
                street
            })
                .then((res) => {
                    // console.log('街道下的点位：', res);
                    const { data } = res;
                    if (!data) {
                        return;
                    }
                    const list = data.map((item, index) => ({
                        id: index,
                        longitude: Number(item.lng),
                        latitude: Number(item.lat),
                        iconPath: iconMap.point,
                        width: 30,
                        height: 30,
                        data: item
                    }));
                    const len = list.length;
                    const longitude = len > 1 ? streetCenter.lng : list[0].longitude;
                    const latitude = len > 1 ? streetCenter.lat : list[0].latitude;
                    this.setData({
                        markers: list,
                        longitude,
                        latitude,
                        scale: 12.5,
                        curModel: 'point'
                    });
                })
                .finally(() => {
                    setTimeout(() => {
                        this.setData({
                            pointLoading: false
                        });
                        uni.hideLoading();
                    }, 1000);
                });
        },

        /**
         * 地图视野变化
         * @param {*} e
         */
        regionchange(e) {
            // console.log('视野变化',e);

            if (e.type === 'end') {
                const { scale } = e.detail;
                const { curModel, pointLoading, streetLoading } = this;
                // console.log('缩放数据', scale, curModel, pointLoading);

                if (scale <= 12 && curModel !== 'street' && !pointLoading && !streetLoading) {
                    // console.log('获取街道级别数据');
                    this.setData({
                        scale
                    });
                    this.getStreetLevelDataFn();
                }
            }
        },

        positionItemClick(e) {
            const { index } = e.currentTarget.dataset;
            const { list } = this;
            const item = list[index];
            // console.log('点击事件：', item, index);
            item.showSub = !item.showSub;
            this.setData({
                list: [...list]
            });
        },

        itemClick(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            const { item } = e.currentTarget.dataset;
            this.showInfo(item);
        },

        subClick() {},

        /**
         * 显示详情弹窗
         * @param {*} curMarkerData
         * @returns
         */
        showInfo(curMarkerData) {
            if (!curMarkerData) {
                return;
            }
            if (this.infoLoading) {
                return;
            }
            const { deviceType, id, deviceSerial } = curMarkerData;
            const { upsCmdValue } = this;

            // 获取UPS告警时的数据
            if (deviceType === 1 && id) {
                if (!upsCmdValue) {
                    return;
                }
                this.setData({
                    infoLoading: true
                });
                getDeviceDetail({
                    deviceSerial,
                    configId: upsCmdValue
                })
                    .then((res) => {
                        // res.data
                        // console.log('UPS的数据：', res.data);

                        const { data } = res.data;
                        if (!data) {
                            return;
                        }

                        // cmdNameMap
                        // tableList
                        const tableList = Object.keys(data).map((key) => {
                            const { name, unit, bool } = cmdNameMap[key];
                            return {
                                label: name,
                                value: bool ? (data[key] ? '是' : '否') : data[key] || 0,
                                unit
                            };
                        });
                        this.setData({
                            showUPS: deviceType === 1,
                            showJK: deviceType === 2,
                            curMarkerData: curMarkerData || {},
                            tableList
                            // upsWarnTime: createTime,
                        });
                    })
                    .catch((err) => {
                        console.log('UPS告警时的数据：', err);
                        uni.showToast({
                            title: '暂无数据',
                            icon: 'none'
                        });
                    })
                    .finally(() => {
                        this.setData({
                            infoLoading: false
                        });
                    });
            } else {
                this.setData({
                    showUPS: deviceType === 1,
                    showJK: deviceType === 2,
                    curMarkerData: curMarkerData || {}
                });
            }
        },

        closeModal() {
            this.setData({
                showUPS: false,
                showJK: false,
                curMarkerData: {},
                tableList: []
            });
        },

        onVisibleChange(e) {
            // console.log('显示变化', e.detail.visible);
            const { visible } = e.detail;
            if (!visible) {
                this.closeModal();
            }
        },

        closeDeviceListModal() {
            this.setData({
                showDeviceList: false,
                curPointData: {}
            });
        },

        onDeviceListPopupVisibleChange(e) {
            // console.log('显示变化', e.detail.visible);
            const { visible } = e.detail;
            if (!visible) {
                this.closeDeviceListModal();
            }
        },

        showImgView(e) {
            this.setData({
                imgVisible: true
            });
        },

        closeImgView(e) {
            this.setData({
                imgVisible: false
            });
        },

        /**
         * 显示设备位置
         * @param {*} e
         * @returns
         */
        showDeviceLocation(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            const { item } = e.currentTarget.dataset;
            // console.log('点击事件：', item);
            if (!item || !item.lng || !item.lat) {
                return;
            }
            // this.showInfo(item);
            const markers = [
                {
                    id: 999,
                    longitude: item.lng,
                    latitude: item.lat,
                    iconPath: iconMap.point,
                    width: 30,
                    height: 30,
                    data: item
                }
            ];
            this.setData({
                markers,
                showLocation: true,
                tabVal: '1',
                longitude: item.lng,
                latitude: item.lat,
                scale: 15
            });
        }
    }
};
</script>
<style lang="less">
/* pages/device/index.wxss */

.search-box {
    display: flex;
    align-items: center;
}

.keyword {
    width: 600rpx;
    margin-left: 20rpx;
}

.message-list {
    height: 970rpx;
    flex-grow: 1;
    background-color: #f0f0f0;
}
.avatar {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    overflow: hidden;
}

.list-item {
    padding: 20rpx;
    background-color: #fff;
    margin-top: 20rpx;

    .item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .right-icon {
            display: flex;
        }
    }

    .left {
        // display: flex;
        // align-items: center;

        .name {
            margin-left: 20rpx;
            font-size: 40rpx;
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;

            .red-bot {
                background-color: #2ba471;
                // background-color: #dd0202;
                width: 20rpx;
                height: 20rpx;
                border-radius: 50%;
                margin-right: 20rpx;
            }
        }

        .address {
            margin-left: 20rpx;
            font-size: 30rpx;
            color: #999;
        }
    }
}

.sub-item {
    padding-left: 40rpx;
    margin-top: 20rpx;
}

.map-container {
    height: 100vh;

    #deviceMap {
        height: 100%;
        width: 100%;
    }
}

.device-popup {
    box-sizing: border-box;
    width: 100%;
    background-color: #ffffff;
    border-radius: 22rpx;
    padding: 40rpx;
    padding-bottom: 100rpx;
    min-height: 400rpx;
}

.tost_content {
    box-sizing: border-box;
    width: 100%;
    background-color: #ffffff;
    border-radius: 22rpx;
    padding: 40rpx;
    padding-bottom: 100rpx;
}

.tost_title {
    border-bottom: 1rpx solid #eee;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tost_title1 {
    width: 40%;
    display: flex;
    align-items: center;
}

.tost_title text {
    font-size: 35rpx;
    color: #000000;
    margin-left: 20rpx;
    font-weight: bold;
}

.cercle {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    // background-color: #dd0202;
    // background-color: #ffd310;
}

.date_ {
    font-size: 28rpx;
}

.tost_btn {
    width: 150rpx;
    text-align: center;
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    margin-left: -75rpx;
}

.table-cont-list {
    max-height: 60vh;
}

.table_cont {
    margin-top: 20rpx;
    > view {
        display: flex;

        > view {
            flex: 1;
            font-size: 25rpx;
            border: 1rpx solid #eee;
            border-right: none;
            border-bottom: none;
            min-height: 56rpx;
            // height: 56rpx;
            text-align: center;
            line-height: 56rpx;
        }

        > view:first-child {
            min-width: 254rpx;
        }

        > view:nth-child(3) {
            max-width: 50rpx;
        }

        > view:last-child {
            border-right: 1rpx solid #eee;
            min-width: 150rpx;
        }
    }

    > view:last-child {
        > view {
            border-bottom: 1rpx solid #eee;
        }
    }
}

.img_cont {
    margin: 0 auto;
    margin-top: 20rpx;
    width: 500rpx;
    height: 340rpx;
    background-color: rgb(218, 218, 218);

    .no_data {
        text-align: center;
        line-height: 340rpx;
        font-size: 31rpx;
        font-weight: bold;
        color: #696666;
    }
}

.statusinfo {
    display: flex;
    margin-top: 24rpx;

    view {
        flex: 1;
        font-size: 30rpx;
        height: 40rpx;
        text-align: center;
    }

    > view:nth-child(1) {
        border-right: 1rpx solid #eee;
    }
}

.diff-box {
    display: flex;
    align-items: center;
    font-size: 30rpx;

    .icon {
        font-size: 50rpx;
    }
}

.customCallout {
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 30px;
    // width: 150px;
    height: 40px;
    display: inline-flex;
    padding: 5px 20px;
    justify-content: center;
    align-items: center;
}
</style>
